<template>
    <div class="page_root" data-page-identification="x_37whdc71lg">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_tt8oxw0tut 自定义模板_eqzck313ih -->
            <a-table
                v-if="tableData.length > 0"
                :columns="tableColumns"
                :data-source="tableData"
                bordered
                :scroll="{ x: 'max-content' }"
                :pagination="false"
            >
                <template #bodyCell="{ column, index, record, text }">
                    <div v-if="column.key === 'name'">{{ text }}</div>
                    <div v-else-if="text === '正常' || text === '完成'" class="green-cell"></div>
                    <div v-else-if="text === '风险' || text === '延期'" class="yellow-cel"></div>
                    <div v-else-if="text === '挑战' || text === '受阻'" class="red-cell"></div>
                    <div v-else></div>
                </template>
            </a-table>
            <div class="no-data" v-else>
                <a-table :columns="noDataColumns" :data-source="[]"></a-table>
            </div>
            <div class="footer">
                <div class="footer-left"></div>
                <div class="footer-right">
                    <div class="tip-green">正常/完成</div>
                    <div class="tip-yellow">风险/延期</div>
                    <div class="tip-red">挑战/受阻</div>
                    <div class="tip-white">无需/跳过</div>
                </div>
            </div>
            <!-- end vid_tt8oxw0tut 自定义模板_eqzck313ih -->
        </a-spin>
    </div>
</template>
  <script setup>
import {
    h,
    ref,
    reactive,
    toRaw,
    markRaw,
    watch,
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUnmount,
    onUnmounted,
    onActivated,
    onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
// import { cloneDeep, isNullOrEmpty, isEmptyArr, isNullOrUnDef, localGet, isContained, isArray, isEmpty,
//   merge, getDifferenceArray, isObject, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission } from '@/utils/index';
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
/*** PUBLISH_EXEGESIS ***
      import UserTableRecords from '@/model/UserTableRecords';
      *** PUBLISH_EXEGESIS ***/

// 获取传入的流程ID
const props = defineProps({
    processInstanceId: {
        type: String
    }
})
const immediateWatch = (source, callback) => {
    watch(source, callback, { deep: true, immediate: true })
}

/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = []
const pageLoading = reactive({
    loading: false,
    tip: undefined
})

// 处理校验

/* ========================== 属性定义 ========================== */

/* -------------------------- 元素数据引用 -------------------------- */

/* ========================== 元素数据引用 ========================== */

/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */

/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */

/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */

/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
    processInstanceId: props.processInstanceId
})

/* ========================== 页面参数 ========================== */

/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================

/* ========================== 组件事件处理方法 ========================== */

/* -------------------------- 生命周期 -------------------------- */
onMounted(() => {})

onUnmounted(() => {
    // 销毁定时器
    setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ? clearInterval(timer) : clearTimeout(timer)
    })
})

/* ========================== 生命周期 ========================== */

/* -------------------------- 数据关联处理 -------------------------- */

/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */

/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */

// ================================定制化逻辑========================================
const tableColumns = ref([])
const tableData = ref([])
const noDataColumns = ref([
    {
        title: '项目阶段',
        key: 'name',
        children: [
            {
                title: '阶段目标',
                children: []
            }
        ]
    },
    {
        title: '发现',
        dataIndex: 'name0',
        key: 'name0',
        children: [
            {
                title: '发现客户，建立联系确定是否为有效线索',
                children: []
            }
        ]
    },
    {
        title: '关注',
        key: 'name0',
        children: [
            {
                title: '识别客户，初步分析需求，获取客户对傲林初步兴趣',
                children: []
            }
        ]
    },
    {
        title: '探索',
        key: 'name0',
        children: [
            {
                title: '接触客户高层，获取客户高层对傲林认可',
                children: []
            }
        ]
    },
    {
        title: '确立',
        key: 'name0',
        children: [
            {
                title: '准备针对性解决方案，获取客户IT和业务高层对方案认可',
                children: []
            }
        ]
    },
    {
        title: '确认',
        key: 'name0',
        children: [
            {
                title: '深度调研，完成详细方案设计、sow、项目预算报告',
                children: []
            }
        ]
    },
    {
        title: '一致',
        key: 'name0',
        children: [
            {
                title: '完成招投标等项目签约工作',
                children: []
            }
        ]
    },
    {
        title: '成功',
        key: 'name0',
        children: [
            {
                title: '项目实施、复盘',
                children: []
            }
        ]
    }
])
post('/solution-crm/api/built-in-system-crm/karm/businessSituation', {}).then(data => {
    const formatColumnData = formatColumns(data.data.header)
    // 创建一个固定的对象
    const fixedObject = {
        title: '项目阶段',
        key: 'name',
        children: [
            {
                title: '阶段目标',
                children: [
                    {
                        title: 'KA项目名称',
                        dataIndex: 'name',
                        key: 'name'
                    }
                ]
            }
        ]
    }

    console.log([fixedObject, ...formatColumnData], 'sadads')
    tableColumns.value = [fixedObject, ...formatColumnData]
    tableData.value = data.data.data
})
// 递归函数来格式化数据
function formatColumns(data, level = 0) {
    const result = []

    data.forEach(item => {
        const column = {
            title: item.name,
            dataIndex: `name${level}`,
            key: `name${level}`,
            children: []
        }

        if (item.child && item.child.child) {
            column.children = formatChild(item.child, level + 1)
        }

        result.push(column)
    })

    return result
}

function formatChild(child, level) {
    const formattedChild = {
        title: child.name,
        children: []
    }

    if (child.child && child.child.length > 0) {
        formattedChild.children = formatChildData(child.child, level)
    }

    return [formattedChild]
}

function formatChildData(children, level) {
    return children.map(childItem => ({
        title: childItem,
        dataIndex: childItem,
        key: `${childItem}${level}`
    }))
}
</script>
  <style lang="less" scoped>
.page_root {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
    height: 100%;
}
.table-moreBtn_down {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
    height: 100%;
    width: 50%;
}
.green-cell {
    width: 100%;
    height: 100%;
    background-color: green;
    color: green;
}
.yellow-cell {
    width: 100%;
    height: 100%;
    background-color: yellow;
    color: yellow;
}
.red-cell {
    width: 100%;
    height: 100%;
    background-color: red;
    color: red;
}

/deep/.ant3-table-cell {
    padding: 0;
    height: 50px;
    width: 100px;
    text-align: center;
}
/deep/.ant3-table.ant3-table-bordered > .ant3-table-container > .ant3-table-header > table > thead > tr > th {
    height: 50px;
}
/deep/.ant3-table-thead > tr > th {
    height: 50px;
}
.footer {
    margin-top: 20px;
    height: 30px;
    display: flex;
    justify-content: space-between;
}
.footer-right {
    width: 25%;
    display: flex;
    justify-content: space-between;
}
.tip-green,
.tip-yellow,
.tip-red,
.tip-white {
    width: 80px;
    height: 30px;
    text-align: center;
    border: 1px solid #d9d9d9;
    line-height: 30px;
    font-weight: bold;
}
.tip-green {
    background-color: green;
    color: #fff;
}
.tip-yellow {
    background-color: yellow;
}
.tip-red {
    background-color: red;
    color: #fff;
}
.tip-white {
    background-color: #fff;
}
/deep/.ant3-table-tbody > tr > td {
    border: 1px solid #d9d9d9;
}
/deep/.ant3-table-thead > tr > th {
    border: 1px solid #d9d9d9;
}
</style>
  